/*
*新增比赛
AddGame.js*/

import React, { PropTypes, PureComponent } from 'react';
import { autobind } from 'core-decorators';
import { Button, Modal, Form, Input,DatePicker,message,Icon  } from 'antd';
import { connect } from 'react-redux';
import moment from 'moment';
import style from '../home.less';
moment.locale('zh-cn');

const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const AddGameForm = Form.create()(
	(props) => {
		const { visible, onCancel, onCreate, form } = props;
		const { getFieldDecorator } = form;
		const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    function checkDate(rule, value, callback){
    	
    	if(value){
    		console.log(11122331,value)
    		const bd = value[0].format('YYYY-MM-DD');
	    	const ed = value[1].format('YYYY-MM-DD');
	    	console.log(11122331,bd,ed)
		    if (!moment(bd).isBefore(ed)) {
		      callback('开始时间大于结束时间!');
		      message.warning('开始时间大于结束时间!');
		    }
		    callback()
    	}
    	
	  }
		return (
			visible ?
				<Modal
					className={` add-AddGameForm`}
					visible={visible}
					title="新增比赛"
					okText="提交"
					cancelText="取消"
					onCancel={onCancel}
					onOk={onCreate}
				>
				<Form layout="vertical" className={style.AddGameForm}>
					{/*<FormItem label="比赛名称: ">*/}
					<FormItem label="比赛名称: " {...formItemLayout}>
            {getFieldDecorator('name', {
              rules: [{ required: true,whitespace: true, message: '请输入比赛名称' }],
            })(
              <Input />
            )}
          </FormItem>
          {/*<FormItem
	          label="时间选择: "
	        >*/}
					<FormItem
	          label="时间选择: " 
	          {...formItemLayout}
	        >
	          {getFieldDecorator('range-picker',{
              rules: [{ required: true, message: '请选择时间' },],
            })(
	            <RangePicker />
	          )}
	        </FormItem>
				</Form>
			</Modal> : null
		);
	},
);

const mapDispatchToProps = {
	addfundCompetition: query => ({
		type: 'privateGame/addfundCompetition',
		payload: query || {},
	}),
};

@connect(null, mapDispatchToProps)
class AddGame extends PureComponent {
	static propTypes = {
		form: PropTypes.object.isRequired,
	}
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			modalHeight: 0,
		};
	}
	componentDidUpdate() {
		const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
		const ele = document.querySelector('.add-AddGameForm .ant-modal-body');
		if (ele) {
			ele.style.height = `${screenHeight * 0.3}px`;
		}
	}

	showModal = () => {
		this.setState({ visible: true });
	}

	handleCancel = () => {
		this.setState({ visible: false });
	}

	handleCreate = () => {
		const form = this.form;
		const { addfundCompetition } = this.props;
		form.validateFields((err, fieldsValue) => {
			if (err) {
				return;
			}
			const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'time': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
      };
      console.log('Received values of form: ', values);
			

	    if (!moment(values.time[0]).isBefore(values.time[1])) {
	      message.warning('开始时间大于结束时间!');
	      this.setState({ visible: true });
	    }else{
	    	addfundCompetition({
					name:values.name,
					beginDate:values.time[0],
					endDate:values.time[1],
				})
				form.resetFields();
				this.setState({ visible: false });
	    }
			
			
			
		});
	}

	saveFormRef = (form) => {
		this.form = form;
	}

	render() {
		return (
			<div >
				{/*<Button type="primary" onClick={this.showModal}>新增</Button>*/}
				<Button  ghost onClick={this.showModal} className="btn-add"><Icon type="plus" />新增</Button>
				<AddGameForm
					ref={this.saveFormRef}
					visible={this.state.visible}
					onCancel={this.handleCancel}
					onCreate={this.handleCreate}
				/>
			</div>
		);
	}
}
export default Form.create({
})(AddGame);